1️⃣ 什么是防抖和节流？

🇨🇳 中文（面试标准答案）

• 防抖（Debounce）：在事件被触发后，等待一段时间，如果期间再次触发，就重新计时，只执行最后一次
• 节流（Throttle）：在一定时间内，无论触发多少次，都只执行一次

🇺🇸 English (interview version)

• Debounce: The function is executed only after the event stops firing for a certain delay.
• Throttle: The function is executed at most once in a fixed time interval, no matter how many times it is triggered.

2️⃣ 经典面试追问：二者的区别是什么？

🇨🇳 中文口语版

• 防抖：等你停下来才执行
• 节流：按时间间隔执行

👉 举例：

• 输入框搜索 → 防抖（停止输入再请求）
• 滚动加载 → 节流（每 200ms 执行一次）

🇺🇸 English

• Debounce waits until the user stops triggering the event.
• Throttle runs the function periodically during continuous events.

3️⃣ 手写防抖

JavaScript 实现

​x
function debounce(fn, delay = 300) {
  let timer = null;
​
  return function (...args) {
    clearTimeout(timer);
​
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

面试口语解释

🇨🇳： 核心就是用 setTimeout + clearTimeout，每次触发都清掉上一次的定时器，只保留最后一次。

🇺🇸： We use setTimeout and cancel previous timers with clearTimeout to ensure only the last call is executed.

4️⃣ 手写节流

时间戳版本（常见）

xxxxxxxxxx
function throttle(fn, delay = 300) {
  let lastTime = 0;
​
  return function (...args) {
    const now = Date.now();
​
    if (now - lastTime >= delay) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

定时器版本（另一种）

xxxxxxxxxx
function throttle(fn, delay = 300) {
  let timer = null;
​
  return function (...args) {
    if (timer) return;
​
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

面试解释

🇨🇳： 节流就是“规定时间内只允许执行一次”，要么用时间戳控制，要么用定时器锁住。

🇺🇸： Throttle ensures the function runs only once per time interval using either timestamps or a timer lock.

5️⃣ 进阶追问（面试官很爱问）

Q1：防抖能不能立即执行第一次？

👉 可以（leading debounce）

x
function debounce(fn, delay, immediate = false) {
  let timer = null;
​
  return function (...args) {
    const callNow = immediate && !timer;
​
    clearTimeout(timer);
​
    timer = setTimeout(() => {
      timer = null;
    }, delay);
​
    if (callNow) fn.apply(this, args);
  };
}

Q2：节流最后一次能不能执行？

👉 可以（trailing throttle），但需要稍微升级实现（面试加分点）

Q3：应用场景区别（非常重要）

6️⃣ 一句话总结（面试杀手锏）

🇨🇳 中文

• 防抖：延迟执行，只执行最后一次
• 节流：固定频率执行

🇺🇸 English

• Debounce: executes after the event stops
• Throttle: executes at a fixed interval

7️⃣ 如果面试官继续深挖（加分点）

可以这样说：

防抖适合“最终状态”，节流适合“过程控制”

防抖节流 + React Hooks 实现版（useDebounce / useThrottle）

① useDebounce（React 防抖 Hook）

使用场景

• input 搜索
• filter 输入
• 表单实时校验

核心思路

• 维护一个 state
• 用 setTimeout 延迟更新
• 每次 value 变化都清理上一个 timer

实现代码

xxxxxxxxxx
import { useEffect, useState } from "react";
​
export function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);
​
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
​
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);
​
  return debouncedValue;
}

面试解释（口语版）

🇨🇳： 每次 value 变化时我不会立即更新，而是启动一个定时器。如果在 delay 时间内 value 又变化了，就清除上一次的定时器，只保留最后一次更新。

🇺🇸： It delays updating the state until the value stops changing for a given delay.

使用方式

xxxxxxxxxx
const [input, setInput] = useState("");
const debouncedInput = useDebounce(input, 500);
​
useEffect(() => {
  // 只在“停下来之后”触发
  fetch(`/api/search?q=${debouncedInput}`);
}, [debouncedInput]);

② useThrottle（React 节流 Hook）

使用场景

• scroll
• resize
• mousemove
• 高频事件

核心思路

• 固定时间间隔内只允许更新一次
• 用 lastTime 或 timer 控制

版本1：时间戳实现（推荐）

xxxxxxxxxx
import { useEffect, useRef, useState } from "react";
​
export function useThrottle(value, delay = 300) {
  const [throttledValue, setThrottledValue] = useState(value);
  const lastTime = useRef(0);
​
  useEffect(() => {
    const now = Date.now();
​
    if (now - lastTime.current >= delay) {
      lastTime.current = now;
      setThrottledValue(value);
    }
  }, [value, delay]);
​
  return throttledValue;
}

版本2：定时器实现（更稳定）

xxxxxxxxxx
import { useEffect, useRef, useState } from "react";
​
export function useThrottle(value, delay = 300) {
  const [throttledValue, setThrottledValue] = useState(value);
  const timer = useRef(null);
​
  useEffect(() => {
    if (timer.current) return;
​
    timer.current = setTimeout(() => {
      setThrottledValue(value);
      timer.current = null;
    }, delay);
  }, [value, delay]);
​
  return throttledValue;
}

面试解释（口语版）

🇨🇳： 节流就是控制更新频率，在一定时间内只允许执行一次 state 更新。

🇺🇸： Throttle limits how often state can be updated during continuous changes.

③ React 面试加分点（重点！！！）

面试官经常追问👇

Q1：为什么要用 useRef 存 timer？

👉 答：

🇨🇳： 因为 useRef 不会触发重新渲染，而且可以跨 render 保持同一个值。

🇺🇸： useRef keeps a stable mutable value across renders without causing re-renders.

Q2：useDebounce vs useThrottle 本质区别？

Q3：能不能封装成“函数防抖 Hook”？

👉 可以升级（高级面试题）：

x
export function useDebouncedCallback(fn, delay = 300) {
  const timer = useRef(null);
​
  return (...args) => {
    clearTimeout(timer.current);
​
    timer.current = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

④ 面试终极总结

🇨🇳 中文

• useDebounce：延迟更新 state，适合输入场景
• useThrottle：限制更新频率，适合高频事件
• 核心都是：控制副作用触发频率

🇺🇸 English

• useDebounce delays state updates until input stops changing
• useThrottle limits how often updates can happen
• Both are used to optimize performance in React apps